/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    BlobInputList, CCell, Cell, Input, InputLine, LineColumn, SuffixInput, Table, TableBody, TableRow, Text, TextArea,
} from "customize-easy-ui-component";
import {CCellUnit, InspectRecordLayout, InternalItemProps, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {DirectLink} from "../../../routing/Link";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";

//较为原始的做法：
interface Props  extends InternalItemProps{
    label?: string;
    titles?: any[];
}

export const itemA安全附件: string[]=['安型号','安数量','安验日','安校报','安整压','安安位',
    '爆型号','爆数量','爆规格','爆周期','爆换日','爆安位',
    '力数量','力检日','力检报','力安位',
    '切规格','切数量','切耐压','切密压','切断时','切检记','切安位','切外观' ];
/**安全附件与仪表检验 (上)
 * */
export const AccessoriesValve=
React.forwardRef((
    { children, show ,alone=true,redId,nestMd,label,titles}:Props,  ref
) => {
    const [getInpFilter]=useMeasureInpFilter(null,itemA安全附件,);
    const {inp, setInp} = useItemInputControl({ ref });
    return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        安 全 阀{'>>'}
        <LineColumn >
            <InputLine  label='型号'>
                <Input value={inp?.安型号 ||''} onChange={e => setInp({...inp, 安型号: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='数量'>
                <Input value={inp?.安数量 ||''} onChange={e => setInp({...inp, 安数量: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='校验日期' >
                <Input  value={inp?.安验日 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 安验日: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='校验报告编号'>
                <Input value={inp?.安校报 ||''} onChange={e => setInp({...inp, 安校报: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='整定压力' >
                <SuffixInput  value={inp?.安整压 ||''}
                              onChange={e => setInp({...inp, 安整压: e.currentTarget.value || undefined}) }>MPa</SuffixInput>
            </InputLine>
            <InputLine  label='安装位置'>
                <BlobInputList value={inp?.安安位 ||''} rows={1}  datalist={['罐上部' ]}
                               onListChange={v => setInp({ ...inp, 安安位: v || undefined}) } />
            </InputLine>
        </LineColumn>
        爆破片装置{'>>'}
        <LineColumn >
            <InputLine  label='型号'>
                <Input value={inp?.爆型号 ||''} onChange={e => setInp({...inp, 爆型号: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='数量'>
                <Input value={inp?.爆数量 ||''} onChange={e => setInp({...inp, 爆数量: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='规格'>
                <Input value={inp?.爆规格 ||''} onChange={e => setInp({...inp, 爆规格: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='更换周期要求'>
                <Input value={inp?.爆周期 ||''} onChange={e => setInp({...inp, 爆周期: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='更换日期' >
                <Input  value={inp?.爆换日 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 爆换日: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='安装位置'>
                <BlobInputList value={inp?.爆安位 ||''} rows={1}  datalist={['罐上部' ]}
                               onListChange={v => setInp({ ...inp, 爆安位: v || undefined}) } />
            </InputLine>
        </LineColumn>
        压 力 表{'>>'}
        <LineColumn >
            <InputLine  label='数量'>
                <Input value={inp?.力数量 ||''} onChange={e => setInp({...inp, 力数量: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='检定日期' >
                <Input  value={inp?.力检日 ||''}  type='date'
                        onChange={e => setInp({ ...inp, 力检日: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='检定报告编号'>
                <Input value={inp?.力检报 ||''} onChange={e => setInp({...inp, 力检报: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='安装位置'>
                <BlobInputList value={inp?.力安位 ||''} rows={1}  datalist={['罐上部' ]}
                               onListChange={v => setInp({ ...inp, 力安位: v || undefined}) } />
            </InputLine>
        </LineColumn>
        紧急切断装置{'>>'}
        <LineColumn >
            <InputLine  label='型式及规格'>
                <Input value={inp?.切规格 ||''} onChange={e => setInp({...inp, 切规格: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='数量'>
                <Input value={inp?.切数量 ||''} onChange={e => setInp({...inp, 切数量: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='耐压试验压力'>
                <SuffixInput  value={inp?.切耐压 ||''}
                              onChange={e => setInp({...inp, 切耐压: e.currentTarget.value || undefined}) }>MPa</SuffixInput>
            </InputLine>
            <InputLine  label='密闭试验压力'>
                <SuffixInput  value={inp?.切密压 ||''}
                              onChange={e => setInp({...inp, 切密压: e.currentTarget.value || undefined}) }>MPa</SuffixInput>
            </InputLine>
            <InputLine  label='切断时间'>
                <SuffixInput  value={inp?.切断时 ||''}
                              onChange={e => setInp({...inp, 切断时: e.currentTarget.value || undefined}) }>S</SuffixInput>
            </InputLine>
            <InputLine  label='检修记录'>
                <Input value={inp?.切检记 ||''} onChange={e => setInp({...inp, 切检记: e.currentTarget.value || undefined}) } />
            </InputLine>
            <InputLine  label='安装位置'>
                <BlobInputList value={inp?.切安位 ||''} rows={1}  datalist={['罐上部' ]}
                               onListChange={v => setInp({ ...inp, 切安位: v || undefined}) } />
            </InputLine>
            <InputLine  label='外观'>
                <Input value={inp?.切外观 ||''} onChange={e => setInp({...inp, 切外观: e.currentTarget.value || undefined}) } />
            </InputLine>
        </LineColumn>
    </InspectRecordLayout>;
});


export const itemA液面计: string[]=['液型式','液数量','液充装','液安位','液外观','液误差',
    '测温型','测温期','测温观',
    '气相压','气相质','气相时',
    '液相压','液相质','液相时',  '其他阀检','检查结果' ];
/**安全附件与仪表检验 (后部) 液面计
 * */
export const AccessoriesLiquid=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,titles}:Props,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA液面计,);
        const {inp, setInp} = useItemInputControl({ ref });
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>
            液位（面）计{'>>'}
            <LineColumn >
                <InputLine  label='型式'>
                    <Input value={inp?.液型式 ||''} onChange={e => setInp({...inp, 液型式: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='数量'>
                    <Input value={inp?.液数量 ||''} onChange={e => setInp({...inp, 液数量: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='容器填充量' >
                    <SuffixInput  value={inp?.液充装 ||''}
                                  onChange={e => setInp({...inp, 液充装: e.currentTarget.value || undefined}) }>kg</SuffixInput>
                </InputLine>
                <InputLine  label='安装位置'>
                    <BlobInputList value={inp?.液安位 ||''} rows={1}  datalist={['罐上部' ]}
                                   onListChange={v => setInp({ ...inp, 液安位: v || undefined}) } />
                </InputLine>
                <InputLine  label='外观'>
                    <Input value={inp?.液外观 ||''} onChange={e => setInp({...inp, 液外观: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='误差'>
                    <Input value={inp?.液误差 ||''} onChange={e => setInp({...inp, 液误差: e.currentTarget.value || undefined}) } />
                </InputLine>
            </LineColumn>
            测温仪表{'>>'}
            <LineColumn >
                <InputLine  label='型号'>
                    <Input value={inp?.测温型 ||''} onChange={e => setInp({...inp, 测温型: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='有效期'>
                    <Input value={inp?.测温期 ||''} onChange={e => setInp({...inp, 测温期: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='外观'>
                    <Input value={inp?.测温观 ||''} onChange={e => setInp({...inp, 测温观: e.currentTarget.value || undefined}) } />
                </InputLine>
            </LineColumn>
            气相软管{'>>'}
            <LineColumn >
                <InputLine  label='试验压力' >
                    <SuffixInput  value={inp?.气相压 ||''}
                                  onChange={e => setInp({...inp, 气相压: e.currentTarget.value || undefined}) }>MPa</SuffixInput>
                </InputLine>
                <InputLine  label='试验介质' >
                    <Input  value={inp?.气相质 ||''}
                            onChange={e => setInp({ ...inp, 气相质: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='保压时间' >
                    <SuffixInput  value={inp?.气相时 ||''}
                                  onChange={e => setInp({...inp, 气相时: e.currentTarget.value || undefined}) }>min</SuffixInput>
                </InputLine>
            </LineColumn>
            液相软管{'>>'}
            <LineColumn >
                <InputLine  label='试验压力' >
                    <SuffixInput  value={inp?.液相压 ||''}
                                  onChange={e => setInp({...inp, 液相压: e.currentTarget.value || undefined}) }>MPa</SuffixInput>
                </InputLine>
                <InputLine  label='试验介质' >
                    <Input  value={inp?.液相质 ||''}
                            onChange={e => setInp({ ...inp, 液相质: e.currentTarget.value || undefined}) } />
                </InputLine>
                <InputLine  label='保压时间' >
                    <SuffixInput  value={inp?.液相时 ||''}
                                  onChange={e => setInp({...inp, 液相时: e.currentTarget.value || undefined}) }>min</SuffixInput>
                </InputLine>
            </LineColumn>
            其他阀门、附件检验：
            <TextArea  value={inp?.其他阀检 ||''} rows={6}
                       onChange={e => setInp({ ...inp, 其他阀检: e.currentTarget.value||undefined}) } />
            检验结果：
            <TextArea  value={inp?.检查结果 ||''} rows={8}
                       onChange={e => setInp({ ...inp, 检查结果: e.currentTarget.value||undefined}) } />
        </InspectRecordLayout>;
    });

//下面的：压力表量程 压力表精度： 是指台账的；
export const AccessoriesVw = ({theme, orc, rep}: { theme: any, orc: any, rep: any }
) => {
    //【表格助手】 JSON.parse(orc?._tblFixed??'[]') 【拉表格列】 直接替换目标表的fixed字段 ：【修改列宽】 【调整宽度】
    return <>
        <div css={{"@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}}}>
            <Text id='Accessories' variant="h2" css={{
                textAlign: 'center', marginTop: '1rem',
            }}>安全附件检验报告</Text>
            <div css={{
                display: 'flex',
                justifyContent: 'space-between'
            }}>
                <Text>单位内部编号：{orc.单位内部编号}</Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={["4.5%", "12%", "%", "12%", "17%", "12%", "22%"]} tight miniw={800}
               css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}}}>
            <TableBody>
                <DirectLink
                    href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/Accessories#Accessories`}>
                    <TableRow id={'Accessories'}>
                        <CCell rowSpan={3}>安全阀</CCell><CCell>型号</CCell><CCell
                        colSpan={3}>{orc.安型号 || '／'}</CCell>
                        <CCell>数量</CCell><CCell>{orc.安数量 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>校验日期</CCell><CCell colSpan={3}>{orc.安验日 || '／'}</CCell><CCell>校验报告编号</CCell><CCell>{orc.安校报 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>整定压力</CCell><CCellUnit colSpan={3} unit='MPa'>{orc.安整压 || '／'}</CCellUnit>
                        <CCell>安装位置</CCell><CCell>{orc.安安位 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell rowSpan={3}>爆破片装置</CCell><CCell>型号</CCell><CCell
                        colSpan={3}>{orc.爆型号 || '／'}</CCell>
                        <CCell>数量</CCell><CCell>{orc.爆数量 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>规格</CCell><CCell
                        colSpan={3}>{orc.爆规格 || '／'}</CCell><CCell>更换周期要求</CCell><CCell>{orc.爆周期 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>更换日期</CCell><CCell colSpan={3}>{orc.爆换日 || '／'}</CCell>
                        <CCell>安装位置</CCell><CCell>{orc.爆安位 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell rowSpan={3}>压力表</CCell><CCell>量程</CCell><CCellUnit colSpan={3}
                                                                                       unit='MPa'>{orc.压力表量程 || '／'}</CCellUnit>
                        <CCell>数量</CCell><CCell>{orc.力数量 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>精度</CCell><CCell
                        colSpan={3}>{orc.压力表精度 || '／'}</CCell><CCell>检定日期</CCell><CCell>{orc.力检日 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>检定报告编号</CCell><CCell colSpan={3}>{orc.力检报 || '／'}</CCell>
                        <CCell>安装位置</CCell><CCell>{orc.力安位 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell rowSpan={3}>紧急切断装置</CCell><CCell>型式及规格</CCell><CCell
                        colSpan={3}>{orc.切规格 || '／'}</CCell>
                        <CCell>数量</CCell><CCell>{orc.切数量 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>耐压试验压力</CCell><CCellUnit unit='MPa'>{orc.切耐压 || '／'}</CCellUnit>
                        <CCell>密闭试验压力</CCell><CCellUnit unit='MPa'>{orc.切密压 || '／'}</CCellUnit>
                        <CCell>切断时间</CCell><CCellUnit unit='s'>{orc.切断时 || '／'}</CCellUnit>
                    </TableRow>
                    <TableRow>
                        <CCell>检修记录</CCell><CCell>{orc.切检记 || '／'}</CCell>
                        <CCell>安装位置</CCell><CCell>{orc.切安位 || '／'}</CCell>
                        <CCell>外观</CCell><CCell>{orc.切外观 || '／'}</CCell>
                    </TableRow>
                </DirectLink>

                <DirectLink
                    href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/AccessoriesLiquid#AccessoriesLiquid`}>
                    <TableRow id={'AccessoriesLiquid'}>
                        <CCell rowSpan={2}>液位（面）计</CCell><CCell>型 式</CCell><CCell>{orc.液型式 || '／'}</CCell>
                        <CCell>数 量</CCell><CCell>{orc.液数量 || '／'}</CCell>
                        <CCell>容器填充量</CCell><CCellUnit unit='kg'>{orc.液充装 || '／'}</CCellUnit>
                    </TableRow>
                    <TableRow>
                        <CCell>安装位置</CCell><CCell>{orc.液安位 || '／'}</CCell>
                        <CCell>外 观</CCell><CCell>{orc.液外观 || '／'}</CCell>
                        <CCell>误差</CCell><CCell>{orc.液误差 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>测温仪表</CCell><CCell>型 号</CCell><CCell>{orc.测温型 || '／'}</CCell>
                        <CCell>有效期</CCell><CCell>{orc.测温期 || '／'}</CCell>
                        <CCell>外观</CCell><CCell>{orc.测温观 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>气相软管</CCell><CCell>试验压力</CCell><CCellUnit
                        unit='MPa'>{orc.气相压 || '／'}</CCellUnit>
                        <CCell>试验介质</CCell><CCell>{orc.气相质 || '／'}</CCell>
                        <CCell>保压时间</CCell><CCellUnit unit='min'>{orc.气相时 || '／'}</CCellUnit>
                    </TableRow>
                    <TableRow>
                        <CCell>液相软管</CCell><CCell>试验压力</CCell><CCellUnit
                        unit='MPa'>{orc.液相压 || '／'}</CCellUnit>
                        <CCell>试验介质</CCell><CCell>{orc.液相质 || '／'}</CCell>
                        <CCell>保压时间</CCell><CCellUnit unit='min'>{orc.液相时 || '／'}</CCellUnit>
                    </TableRow>
                    <TableRow>
                        <Cell split={true} colSpan={7}>
                            <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>其他阀门、附件检验：<br/>
                                {orc.其他阀检 || '／'}
                            </div>
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <Cell split={true} colSpan={7}>
                            <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>检验结果：<br/>
                                {orc.检查结果 || '／'}
                            </div>
                        </Cell>
                    </TableRow>
                </DirectLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
        </TailMenRowIspCheck>
    </>;
};
